OBJECT


In JavaScript, an object is a standalone entity, with properties and type. Objects are used to store collections of data and more complex entities. They are a fundamental part of JavaScript and are essential for creating dynamic and interactive web applications.

Creating Objects

Object Literals

One of the simplest ways to create an object is using an object literal:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    job: 'Developer'
};

Using the new Object() Syntax

You can also create an object using the new Object() syntax:

const person = new Object();
person.firstName = 'John';
person.lastName = 'Doe';
person.age = 30;
person.job = 'Developer';

Constructor Functions

Constructor functions are used to create multiple objects of the same type:

function Person(firstName, lastName, age, job) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.job = job;
}

const person1 = new Person('John', 'Doe', 30, 'Developer');
const person2 = new Person('Jane', 'Smith', 25, 'Designer');

Properties and Methods

Objects can have properties and methods. Properties are values associated with an object, and methods are functions that belong to an object.

Accessing Properties

You can access object properties using dot notation or bracket notation:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    job: 'Developer'
    };
console.log(person.firstName); // Dot notation
console.log(person['lastName']); // Bracket notation

Adding and Modifying Properties

You can add or modify properties directly:

person.firstName = 'Michael';
person['lastName'] = 'Johnson';

Methods

Methods are functions stored as object properties:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    job: 'Developer',
    fullName: function() {
        return this.firstName + ' ' + this.lastName;
    }
};

console.log(person.fullName());

Object Prototypes

All JavaScript objects inherit properties and methods from a prototype. The prototype is also an object.

Prototype Inheritance

JavaScript objects inherit from the Object.prototype:

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Person.prototype.fullName = function() {
    return this.firstName + ' ' + this.lastName;
};

const person1 = new Person('Nitin', 'Maurya');
console.log(person1.fullName());

Advanced Topics

Shallow and Deep Copy

- A shallow copy creates a new object, but it only copies the references to the nested objects, not the nested objects themselves. Changes to nested objects will affect both the original and the shallow copy.

- A deep copy, on the other hand, creates a new object and recursively copies all nested objects, resulting in a completely independent copy. Changes to nested objects won't affect the original object in a deep copy

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    job: 'Developer'
    };
const personCopy = Object.assign({}, person); // Shallow copy
const personDeepCopy = JSON.parse(JSON.stringify(person)); // Deep copy

console.log(person);
console.log(personCopy);
console.log(personDeepCopy);

Object Destructuring

Destructuring allows you to unpack values from arrays or properties from objects into distinct variables:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    job: 'Developer'
    };
const { firstName, lastName } = person;
console.log(firstName, lastName);

Object Methods

JavaScript provides several built-in methods for objects:

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    job: 'Developer'
    };
const keys = Object.keys(person);
const values = Object.values(person);
const entries = Object.entries(person);

console.log(keys);
console.log(values);
console.log(entries);

Resources for Further Learning